{extend name="common/base"}
{block name="content"}
<table id="category" lay-filter="category"></table>
<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>

{/block}

{block name="js"}
{__block__}
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#category'
            ,height: 'full-220'
            ,data: {$categories}
            ,page: true //开启分页
            ,cols: [[ //表头
                {checkbox: true},
                {field: 'id', title: 'ID',width: 100,sort: true}
                ,{field: 'name', title: '合同分类名称',sort: true}
                ,{title: '操作',fixed: 'right', width:150, align:'center', toolbar: '#operateBar'}
            ]]
        });
        table.on('tool(category)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log(data);
            // 删除
            if (layEvent === 'del') {
                layer.confirm('确定要删除吗', {icon: 3, title:'提示'}, function(index){
                    var delLoadingIndex = layer.load(1);
                    $.ajax({
                        type: 'DELETE',
                        url: '/category/del/' + data.id,
                        success: function (result) {
                            layer.close(delLoadingIndex);
                            if (result === 1) {
                                obj.del();
                                layer.msg('操作成功');
                                console.log(result);
                            } else if (result == 'hasTypes') {
                                layer.open({content:'当前分类下存在合同类别，请先删除该分类下的所有合同类别，再进行该操作！', icon:2});
                            } else {
                                layer.msg('操作失败');
                                console.log(result);
                            }
                        },
                        error: function (error) {
                            layer.close(delLoadingIndex);
                            layer.msg('操作失败');
                            console.log(error)
                        }
                    });

                    layer.close(index);
                });
            }
            // 编辑
            if (layEvent === 'edit') {
                location.href = '/category/edit/' + data.id;
            }
            // 查看详情
            if (layEvent === 'detail') {
                layer.open({
                    type: 1,
                    area: ['500px'],
                    btn: '确定',
                    btnAlign: 'c',
                    title: '合同分类详情',
                    content: '<div style="padding: 10px;">' +
                    '<table class="layui-table">' +
                    '<tr><th style="font-weight: bold;" width="80">ID</th><td>'+data.id+'</td></tr>' +
                    '<tr><th style="font-weight: bold;">合同分类名称</th><td>'+data.name+'</td></tr>' +
                    '<tr><th style="font-weight: bold;">备注</th><td>'+data.note+'</td></tr>' +
                    '<tr><th style="font-weight: bold;">创建时间</th><td>'+data.create_time+'</td></tr>' +
                    '</table>' +
                    '</div>' //这里content是一个普通的String
                });
            }
        })
        // 监听开关
        // table.on('switch(status)', function(data){
        //     data.status = 5;
        //     console.log(data)
        //     console.log($(data.elem).val())
        //     if (data.elem.checked) {
        //         $(data.elem).val(1);
        //     } else {
        //         $(data.elem).val(2);
        //     }
        //     // console.log($(data.elem).val());
        // });
    })
</script>
{/block}